import {goods} from "./goods.js";
import {todayRecommend} from "./todayrecommend.js"

export let name = "Home";
export  function Render(){
    return `
    <style>
    .bottomNav{
    z-index: 100;
    }
    .content{
    height: 94%;
    overflow: auto;
    }
    .home-topDiv,.home-coupon,.home-search{
    width: 100%;
    }
    .home-topDiv img{
    width: 100%;
    }
    .home-coupon{
    background: url("../../indexpictures/centerBackground.png") no-repeat center top / 100%;
    height: 25rem;
    padding-top: 4rem;
    box-sizing: border-box;
    }
    .home-search input{
    width: 85%;
    height: 5.5rem;
    border-radius: 2.5rem;
    font-size: 2.2rem;
    margin: 1rem 1.5rem;
    }
    .home-search input::placeholder{
    color: rgb(176, 179, 191);
    }
    .home-search{
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    }
   .home-coupon-div{
   background-color: #2aae67;
   width: 28%;
   height: 85%;
   margin: 0 2rem;
   border-radius: 3rem;
   text-align: center;
   padding: 1.3rem 2.5rem;
   box-sizing: border-box;
   }
   .home-coupon-div .home-coupon-price{
   color: #fff;
   }
   .home-coupon-div .home-coupon-price b{
   font-size: 4rem;
   }
   .home-coupon-div .home-coupon-price span{
   font-size: 2.5rem;
   }
   .home-coupon-div .home-coupon-title{
   color: #fff;
   font-size: 2rem;
   margin-top: 2rem;
   }
   .home-coupon-div a{
   display: block;
   font-size: 2.2rem;
   color: #2aae67;
   background-color: #fff;
   padding: 1rem;
   border-radius: 2rem;
   margin-top: 0.5rem;
   }
   .home-goods{
   width: 100%;
   background-color: #009249;
   }
   /*今日推荐*/
   .home-todeyRecommend{
   width: 100%;
   padding: 2rem ;
   box-sizing: border-box;
   }
   .home-todeyRecommend .ad1{
   width: 100%;
   border-radius: 1rem;
   margin-bottom: 1rem;
   }
   .home-todeyRecommend .ad2,.ad3{
   width: 48%;
   border-radius: 1rem;
   }
   .home-todeyRecommend .ad2{
   margin-right: 1.8rem;
   }
   .home-todeyRecommend-title{
   width: 100%;
   }
   .home-todeyRecommend-title img{
   width: 100%;
   }
   /*五折*/
   .home-five{
   width: 100%;
   }
   .home-five .home-five-title{
   width: 100%;
   }
   .home-five .home-five-title img{
   width: 100%;
   }
   .home-five-goods{
   width: 100%;
   margin-top: 2rem;
   }
   .home-five-goods .home-five-goods-public{
   width: 32%;
   background-color: #fff;
   border-radius: 1rem;
   margin-left: 0.6rem;
   margin-top: 0.6rem;
   padding-bottom: 2rem;
   box-sizing: border-box;
   }
   .home-five-goods .home-five-goods-public img{
   width: 100%;
   border-radius: 1rem;
   }
   .home-five-goods .home-five-goods-public .home-good-text{
   width: 85%;
   margin-left: 8%;
   font-size: 2.5rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-top:2rem;
   }
   .home-five-goods .home-five-goods-public .home-good-price{
   font-size: 2rem;
   color: #e74c3c;
   margin: 2rem 0 0 8%;
   }
   .home-five-goods .home-five-goods-public .home-good-price span{
   font-size: 2.5rem;
   }
   /*端午活动*/
   .home-activities{
   width: 100%;
   margin-top: 2rem;
   }
   .home-activities .home-activities-title{
   width: 100%;
   }
   .home-activities .home-activities-title img{
   width: 98%;
   margin-left: 1%;
   }
   .home-activities .home-activities-goods{
   width: 100%;
   padding-bottom: 3rem;
   box-sizing: border-box;
   }
   .home-activities .home-activities-goods-public{
   width: 45%;
   background-color: #fff;
   border-radius: 1rem;
   margin-left: 2rem;
   margin-top: 2rem;
   }
   .home-activities .home-activities-goods-public img{
   width: 100%;
   border-radius: 1rem;
   }
   .home-activities .home-activities-goods-public p{
   width: 90%;
   margin: 1.7rem 1rem;
   font-size: 2.2rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   }
   .home-activities .home-activities-goods-public ul li:nth-child(1){
   font-size: 2rem;
   color:#8c8c8c;
   margin-left: 1rem;
   }
   .home-activities .home-activities-goods-public ul li:nth-child(2){
   font-size: 1.5rem;
   border: rgba(255, 0, 0, .25) 0.1rem solid;
   width: 4rem;
   height: 2.5rem;
   color: red;
   line-height: 2.5rem;
   text-align: center;
   margin: 1.5rem 1rem;
   }
   .home-activities .home-activities-goods-public ul li:nth-child(3){
   color: red;
   font-size: 2rem;
   margin-left: 1rem;
   }
   .home-activities .home-activities-goods-public ul li:nth-child(3) span{
   font-size: 3rem;
   }
   .home-activities .home-activities-goods-public  ul li:nth-child(3) .initial-price{
   font-size: 2rem;
   color: #ccc;
   text-decoration: line-through;
   margin-left: 1rem;
   }
   .home-activities .home-activities-goods-public  ul li:nth-child(4) {
   font-size: 1.5rem;
   color: #ccc;
   margin: 1rem;
   position: relative;
   }
   .home-activities .home-activities-goods-public  ul li:nth-child(4) .icon-gouwuche{
   color: #fff;
   font-size: 2.2rem;
   display: block;
   width: 4rem;
   height: 4rem;
   line-height: 4rem;
   background-color: #55a532;
   text-align: center;
   border-radius: 4rem;
   position: absolute;
   top:-2rem;
   right: 0;
   }
    </style>
<!--    顶部搜索-->
    <div class="home-search">
    <input type="text" placeholder="请输入关键字">
    <img src="../../indexpictures/search.png" >
    </div>
<!--    顶部图片-->
    <div class="home-topDiv">
    <img src="../../indexpictures/topPicture.png">
    </div>
    
<!--    优惠券-->
    <div class="home-coupon">
    <div class="home-coupon-div">
    <p class="home-coupon-price"><b>2.00</b><span>元</span></p>
    <p class="home-coupon-title">满10.00元,减2元</p>
    <a href="javascript:;">立即领取</a>
</div>
</div>
<!--商品div-->
<div class="home-goods">
    <!--今日推荐-->
    <div  class="home-todeyRecommend-title">
       <img src="../../indexpictures/todayBackground.png">
    </div>
    <div class="home-todeyRecommend"></div>
     <!--端午爆款 5折-->
    <div class="home-five">
        <div class="home-five-title">
           <img src="../../indexpictures/5折background.png">
        </div>
        <div class="home-five-goods clearfix">
           
        </div>
    </div>
    <!--    惠聚端午节-->
    <div class="home-activities">
        <div class="home-activities-title">
            <img src="../../indexpictures/粽子礼盒.png" >
        </div>
        <div class="home-activities-goods clearfix">
           
        </div>
    </div>
</div>
    `
}
export function afterRender(){
// 动态生成今日推荐的图片,以便日后今日推荐的内容修改
    let homeTodeyRecommend = document.querySelector(".home-todeyRecommend");
    todayRecommend.forEach(function (obj){
        homeTodeyRecommend.innerHTML += `
        <img src="${obj.src}" class="${obj.name}">
        `
    })
    //给今日推荐图片注册点击事件并修改hash值 跳转到分类页面
    let imgs = document.querySelectorAll(".home-todeyRecommend img");
    imgs.forEach(function (img,index){
        img.addEventListener("click",function(){
            location.hash = todayRecommend[index].path;
        })
    })
//给顶部搜索右边的优惠券图片注册点击事件,跳转到 我的 页面中的领券中心
    let homeSearchImg = document.querySelector(".home-search img");
    homeSearchImg.addEventListener("click",function(){
        location.hash = "/领券中心"
    })
//动态生成端午爆款,低至五折中的商品
    let homeFivegoods = document.querySelector(".home-five-goods")
    goods.forEach(function (obj,index){
        if(index === 5){
            return;
        }
        homeFivegoods.innerHTML += `
         <div class="home-five-goods-public left">
                    <img src="${obj.src}">
                    <p class="home-good-text">${obj.text}</p>
                    <p class="home-good-price">￥<span>${obj.price}</span></p>
                </div>
        `

    })
    //给商品绑定点击事件
    let homeGoodspublic = document.querySelectorAll(".home-five-goods-public");
    homeGoodspublic.forEach(function (goodDiv,index){
        goodDiv.addEventListener("click",function(){
            location.hash = goods[index].path;
        })
    })
//动态生成端午活动中的商品
   let homeActivities = document.querySelector(".home-activities-goods");
    goods.forEach(function (obj){
        if(obj.initialPrice === null){
            homeActivities.innerHTML += `
             <div class="home-activities-goods-public left">
                    <img src="${obj.src}">
                    <p>${obj.text}</p>
                    <ul>
                        <li>${obj.miniTitle}</li>
                        <li>国庆</li>
                        <li>￥<span>${obj.price}</span></li>
                        <li>已售<span>${obj.soldNumber}</span><span class="iconfont icon-gouwuche"></span></li>
                    </ul>
                </div>
            `
        }else {
            homeActivities.innerHTML += `
             <div class="home-activities-goods-public left">
                    <img src="${obj.src}">
                    <p>${obj.text}</p>
                    <ul>
                        <li>${obj.miniTitle}</li>
                        <li>国庆</li>
                        <li>￥<span>${obj.price}</span><span class="initial-price">￥${obj.initialPrice}</span></li>
                        <li>已售<span>${obj.soldNumber}</span><span class="iconfont icon-gouwuche"></span></li>
                    </ul>
                </div>
            `
        }
    })
    //给商品绑定点击事件
    let homeactGoodspublic = document.querySelectorAll(".home-activities-goods-public");
    homeactGoodspublic.forEach(function (goodDiv,index){
        goodDiv.addEventListener("click",function(){
            location.hash = goods[index].path;
        })
    })
}